<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>面向对象的方法</title>
    <link rel="stylesheet" type="text/css" href="CSS/base.css" />
    <link rel="stylesheet" type="text/css" href="CSS/solidBox.css" />
    <script type="text/javascript" src="JS/tool.domElement.js"></script>
    <script type="text/javascript">
        //面向对象 针对的是选项卡
        //属性 -> 标题对象 内容对象
        //方法 -> 绑定事件的方法 显示内容标题高亮的方法

        //先用语法糖创建一个类
        class SolidBox{
            constructor(idName) { //构造器里面写属性
                //第一步，获取对象
                this.solidBox = document.getElementById(idName)
                this.solidBox_title = this.solidBox.children[0].children
                this.solidBox_content = this.solidBox.children[1].children

                //实例化生成对象的时候调用初始化事件方法
                this.initEvent()
            }

            //第二步，绑定方法
            initEvent(){ //初始化方法，初始化只做绑定点击事件这一件事
                //循环为每一个标题绑定点击事件
                for(let index = 0; index < this.solidBox_title.length; index++){
                    this.solidBox_title[index].onclick = () => { //es6可以用箭头函数绑定this指向
                        //console.log(index)
                        this.show(index) //调用实现效果方法
                    }
                }
            }

            //第三步，实现效果
            show(title_index){ //实现效果方法，只做实现效果这一件事
                //依旧用一个循环来判断绑定点击事件的标题是否被点击了，来触发相应效果
                for(let j = 0; j < this.solidBox_title.length; j++){
                    if(j === title_index){
                        this.solidBox_title[j].className = "hover"
                        this.solidBox_content[j].style.display = "block"
                    }else{
                        this.solidBox_title[j].className = ""
                        this.solidBox_content[j].style.display = "none"
                    }
                }
            }
        }

        //如果要增加新功能，可以使用继承
        class SolidBox_lv2 extends SolidBox{
            constructor(idName) {
                super(idName);
            }
            show(){
                //假如这是重写的show方法，这样用这个构造函数实例化出来的对象，所使用的show方法就是新的方法
            }
        }

        //当浏览器加载成功之后调用该函数
        window.onload = function (){
            let solidBox = new SolidBox("solidBox") //实例化生成一个对象
            let solidBox1 = new SolidBox("solidBox1")
            let solidBox2 = new SolidBox_lv2("solidBox2")
        }
    </script>
</head>
<body>
<!--第1个盒子-->
<div id="solidBox" class="solidBox">
    <h3 class="solidBox_title clearfix">
        <strong class="hover">足球</strong>
        <strong>篮球</strong>
        <strong>其他</strong>
    </h3>
    <div class="solidBox_content">
        <div style="display: block">足球对应的内容</div>
        <div style="display: none">篮球对应的内容</div>
        <div style="display: none">其他对应的内容</div>
    </div>
</div>
<!--第1个盒子-->
<div id="solidBox1" class="solidBox">
    <h3 class="solidBox_title clearfix">
        <strong class="hover">足球</strong>
        <strong>篮球</strong>
        <strong>其他</strong>
    </h3>
    <div class="solidBox_content">
        <div style="display: block">足球对应的内容</div>
        <div style="display: none">篮球对应的内容</div>
        <div style="display: none">其他对应的内容</div>
    </div>
</div>
</body>
</html>